import React, { useState } from "react"
import { Button } from "esy-ui"
import { useTranslation } from "react-i18next"

export const DemoL2 = () => {
    const { t } = useTranslation()
    const [loading, setLoading] = useState(false)

    // 异步点击事件
    const onClick = async (_: unknown, cb: () => void) => {
        // 接口调用
        setTimeout(() => {
            cb()
        }, 3000)
    }

    return (
        <div>
            <Button type="primary" onClick={onClick} loading={loading} changeLoading={setLoading}>
                {t("async")}
            </Button>
            <p className="text-primary text-sm">状态：{loading ? "正在加载中..." : "还未开始加载"}</p>
        </div>
    )
}

export const demoL2Json = () => `
import React, { useState } from "react"
import { Button } from "esy-ui"
import { useTranslation } from "react-i18next"

export const DemoL2 = () => {
    const { t } = useTranslation()
    const [loading, setLoading] = useState(false)

    // 异步点击事件
    const onClick = async (_: unknown, cb: () => void) => {
        // 接口调用
        setTimeout(() => {
            cb()
        }, 3000)
    }

    return (
        <div>
            <Button type="primary" onClick={onClick} loading={loading} changeLoading={setLoading}>
                {t("async")}
            </Button>
            <p className="text-primary text-sm">状态：{loading ? "正在加载中..." : "还未开始加载"}</p>
        </div>
    )
}
`
